<template>
  <div class="login_container">
    <div class="font">实验室预约系统</div>
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="@/assets/01.jpg" alt="" />
      </div>
      <!-- 登录表单区域 -->
      <el-form style="height: 300px; width: 50%; margin: 20% auto">
        <!-- 用户名 -->
        <el-form-item style="flex-wrap: nowrap">
          <!-- <el-icon><user/></el-icon> -->
          <el-input
            type="text"
            style="width: 350px; height: 32px"
            v-model="username"
            placeholder="请输入用户名"
            prefix-icon="user"
          >
          </el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item>
          <el-input
            style="width: 350px; height: 32px"
            v-model="password"
            placeholder="请输入密码"
            type="password"
            prefix-icon="lock"
          >
          </el-input>
        </el-form-item>

        <!-- 按钮区域 -->
        <el-row justify="end">
          <el-radio label="0" v-model="radio">学生系统</el-radio>
          <el-radio label="1" v-model="radio">管理员系统</el-radio>
          <el-form-item class="login_btn">
            <el-button type="primary" @click="jump">登录</el-button>
            <el-button type="info">重置</el-button>
            <el-link
              type="primary"
              style="margin-left: 10px"
              @click="dialogVisible"
              >没有账户？去注册
            </el-link>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
 <script>
import { ElMessage } from "element-plus";
import axios from "axios";

export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
      radio: "0",
    };
  },
  methods: {
    jump() {
      if (!this.username) {
        ElMessage({
          message: "名字不能为空",
          type: "warning",
        });
      } else if (!this.password) {
        ElMessage({
          message: "密码不能为空",
          type: "warning",
        });
      } else {
        if (this.radio == "0") {
          axios
            .post("http://localhost:8081/user/login", {
              username: this.username,
              password: this.password,
            })
            .then((res) => {
              if (res.data) {
                debugger
                this.$store.commit('setLongin', res.data)
                this.$router.replace({ name: "userone" });
                ElMessage({
                  message: "学生"+this.$store.getters.getLogin.username+"登录成功",
                  type: "success",
                });
              } else {
                ElMessage.error("学生账号或密码错误");
              }
            })
            .catch((error) => {
              ElMessage.error("网络错误：" + error);
            });
        } else {
          //管理员的登录
          axios
            .post("http://localhost:8081/admin/login", {
              name: this.username,
              password: this.password,
            })
            .then((res) => {
              if (res.data) {
                debugger
                this.$store.commit('setLongin', res.data)
                this.$router.replace({ name: "Addgood" });
                ElMessage({
                  message: "管理员"+this.$store.getters.getLogin.name+"登录成功",
                  type: "success",
                });
              } else {
                ElMessage.error("管理员或密码错误");
              }
            })
            .catch((error) => {
              ElMessage.error("网络错误：" + error);
            });
        }
      }
    },
    dialogVisible() {
      this.$router.push({ name: "Register" });
    },
  },
};

// const visiableDialog = ref(null)
// const user = reactive({
//   name: '张三',
//   age: 20
// })
// function openDialog() {
//   visiableDialog.value.dialogVisble = true
//   console.log(visiableDialog.value.dialogVisble);
// }
</script>
   
  <style scoped>
.font {
  margin: 0;
  padding-top: 110px;
  text-align: center;
  font: 58px bold;
  color: #3d6792;
}
.login_container {
  background-image: url("@/assets/01.jpg");
  background-size: cover;
  background-color: #2b4b6b;
  height: 100vh;
}
.login_box {
  /* 宽450像素 */
  width: 500px;
  /* // 高300像素 */
  height: 300px;
  /* // 圆角边框3像素 */
  border-radius: 15px;
  border: #ffffff8e solid 6px;
  /* // 绝对定位 */
  position: absolute;
  /* // 距离左则50% */
  left: 50%;
  /* // 上面距离50% */
  top: 50%;
  /* // 进行位移，并且在横轴上位移-50%，纵轴也位移-50% */
  transform: translate(-50%, -35%);
}

.avatar_box {
  /* // 盒子高度130像素 */
  height: 2px;
  /* // 宽度130像素 */
  width: 80px;
  /* // 边框线1像素 实线 */
  /* // 圆角 */
  border-radius: 50%;
  margin-top: 5px;
  /* // 内padding */
  /* padding: 5px; */
  /* // 添加阴影 向外扩散10像素 颜色ddd */
  box-shadow: 0 0 15px #ddddddd2;
  /* // 绝对定位 */
  position: absolute;
  /* // 距离左则 */
  left: 50%;
  /* // 位移 */
  transform: translate(-50%, -50%);
  /* // 背景 */
  border: #ffffffbb solid 3px;
  line-height: 100px;
}
img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #eee;
}
.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.login_btn {
  margin: 0;
  padding-left: 50px;
  height: 50px;
  width: 100%;
  /* // 设置弹性布局 */
  display: flex;
  /* // 横轴上尾部对齐 */
  align-items: center;
  justify-content: center;
}
</style>


  